<template>
    <div class="mine-grid">
        <div class="grid-item" v-for="(item,index) in GridList" :key="index">
            <div class="icon">
                <i class="iconfont" :class="item.icon" :style="{'color':color}"></i>
            </div>
            <span class="name">{{item.text}}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'MineGrid',
    props: {
        color: {
            type: String
        }
    },
    data() {
        return {
            GridList: [
                { icon: 'icon-work', text: 'VIP会员' },
                { icon: 'icon-smile', text: '我的点赞' },
                { icon: 'icon-edit', text: '我的评论' },
                { icon: 'icon-time', text: '浏览历史' }
            ]
        }
    }
}
</script>

<style scoped>
.mine-grid{
    margin-top:0.2rem;
    width:100%;
    display: flex;
    border-radius:0.4rem 0.4rem 0 0;
    background:#fff;
    box-shadow:0px -4px 14px #eee;
    overflow: hidden;
}
.mine-grid .grid-item{
    position: relative;
    width:25%;
    text-align: center;
    padding:0.2rem;
}
.mine-grid .grid-item::before{
    content:"";
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    background:#000;
    opacity:0;
    transition:all 0.3s;
}
.mine-grid .grid-item:active::before{
    opacity:0.1;
    top:0.3rem;
    right:0.5rem;
    left:0.5rem;
    bottom:0.3rem;
    border-radius:100%;
}
.mine-grid .grid-item .icon{
    width:100%;
    height:0.5rem;
    line-height:0.3;
    margin-bottom:0.1rem;
}   
.mine-grid .grid-item .icon .iconfont{
    font-size:0.44rem;

}
.mine-grid .grid-item .name{
    display: block;
    font-size:0.28rem;
    font-weight: 600;
    color:#333;
}
</style>